<template>
  <div class="trends" v-if="!getIsPhone">
    <sub-header class="sub-header"></sub-header>
    <div class="lottery-info">
      <div class="content">
        <div class="left">
          <div class="icon">
            <lottery-icon></lottery-icon> 
          </div>
          <div class="detail">
            <div class="name">
              重庆时时彩
            </div>
            <div class="draw">
              <span class="content-item past">今日已开<span class="highlight-red">{{generalInfo.drawedCount}}</span>期</span>
              <span class="content-item future">还有<span class="highlight-red">{{generalInfo.remainingCount}}</span>期</span>
            </div>
            <div class="time">
              <span class="content-item">距<span class="highlight-dark highlight-red">{{generalInfo.nextDateNo}}</span>期剩余</span>
              <span class="countdown-wrapper">
                <count-down-normal :timeStamp="generalInfo.drawTime" :color="'#fff'"></count-down-normal>
              </span>
            </div>
          </div>
        </div>
        <div class="center">
          <tab-bar :tabNames="tabNames"></tab-bar>
        </div>
        <div class="right"></div>
      </div>
    </div>
    <div class="main">
      <div id="wrap">
        <!-- 按钮筛选部分 -->
        <div class="btnHeader">

            <!-- 左侧三个按钮 -->
            <button class="btn">双面</button>
            <button class="btn">长龙</button>
            <button class="btn">分布</button>

            <!-- 右侧图标和三个按钮 -->
            <span @click="clickIndex=index" :class="clickIndex===index?'changeRed':''" class="btn2" v-for="(item,index) in btn" :key="index">{{ item }}</span>
            <span class="img"></span>

        </div>

        <!-- 表 -->
        <ul class="list">
            <!-- 表头 -->
            <li class="listHead"><span @click="getIndex(index)" :class="spanWidth(index)" v-for="(item,index) in listHead" :key="index">{{ item }}</span></li>
            <!-- 表内容 -->
            <li class="listBody" v-for="(item,index) in listData" :key="index" >
                <span :class="item.isCurrent?'current':''" class="item issueNumber">{{ item.issueNumber }}<span  v-if="item.isCurrent">当前期</span></span>
                <span class="item time">{{ item.time }}</span>
                <span class="item sanxiang">
                    <span v-show="showSanxiang(indexs)" v-for="(items,indexs) in item.sanxiang" :key="indexs">
                        <span :class="item.isCurrent?'sanxiangCurrent':'numberBall'" v-for="(itemss,indexss) in items" :key="indexss" >{{ itemss }}</span>
                    </span>
                </span>
                <span class="item sum1">{{ item.sum1 }}</span>
                <span :class="item.sum2==='大'?'redColor':''" class="item sum2">{{ item.sum2 }}</span>
                <span :class="sum3Color(item.sum3)" class="item sum3">{{ item.sum3 }}</span>
                <span :class="dragonTigerColor(item.dragonTiger)" class="item dragonTiger">{{ item.dragonTiger }}</span>
                <span :class="formColor(item.form1)" class="item form1">{{ item.form1 }}</span>
                <span :class="formColor(item.form2)" class="item form2">{{ item.form2 }}</span>
                <span :class="formColor(item.form3)" class="item form3">{{ item.form3 }}</span>
            </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="trends" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <header-dropdown @click="showSlide" :name="lotteryName"></header-dropdown>
      </template>
      <template v-slot:right>
        <time-picker class="time-picker-adjust"></time-picker>
      </template>
    </header-template-phone>
    <div class="tabbar-wrapper">
      <tab-bar></tab-bar>
    </div>
    <div class="main">
      <div class="buttons">
        <div 
          v-for="(item, index) in buttonNames" 
          :key="item.id" 
          class="btn button-unselected"
          :class="activeBtnIndex == index ? 'button-selected' : ''"
          @click="handleBtnClick(index)"
          >
          {{item.name}}
        </div>
      </div>
      <div class="list box-shadow">
        <list-item v-for="item in dataList" :key="item.id" :item="item"></list-item>
      </div>
    </div>
    <div class="bottom-info">
      <div class="content">
        <span class="content-item past">今日已开<span class="highlight-red">{{generalInfo.drawedCount}}</span>期</span>
        <span class="content-item future">还有<span class="highlight-red">{{generalInfo.remainingCount}}</span>期</span>
        <span class="content-item">距<span class="highlight-dark">{{generalInfo.nextDateNo}}</span>期剩余</span>
        <span class="countdown-wrapper">
          <count-down-normal :timeStamp="generalInfo.drawTime" :color="'#fff'"></count-down-normal>
        </span>
      </div>
    </div>
    <bc-modal v-show="showSlideUp">
      <slide-up-buttons :show="showSlideUp" :listData="lotteryCates" @click="updateLotteryName"></slide-up-buttons>
    </bc-modal>
    
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import HeaderDropdown from '@/components/base/header-dropdown/header-dropdown'
import TimePicker from '@/components/time-picker/time-picker'
import SlideUpButtons from '@/components/slide-up-buttons/slide-up-buttons'
import BcModal from '@/components/base/bc-modal/bc-modal'
import TabBar from './components/tab-bar'
import ListItem from './components/list-item'
import CountDownNormal from '@/components/base/count-down/count-down-normal'
import SubHeader from '@/components/header/sub-header/sub-header'
import LotteryIcon from '@/components/base/lottery-icon/lottery-icon'


import { mapGetters } from 'vuex';

export default {
  components: {
    HeaderTemplatePhone,
    HeaderBack,
    TimePicker,
    HeaderDropdown,
    SlideUpButtons,
    BcModal,
    TabBar,
    ListItem,
    CountDownNormal,
    SubHeader,
    LotteryIcon
  },
  data() {
    return {
      showSlideUp: false,
      lotteryName: '重庆时时彩',
      lotteryCates: [
        {
          id: 1,
          name: '重庆时时彩',
        },
        {
          id: 2,
          name: '急速时时彩',
        },
        {
          id: 3,
          name: '天津时时彩',
        },
        {
          id: 4,
          name: '新疆时时彩',
        },
        {
          id: 5,
          name: '山东11选5',
        },
        {
          id: 6,
          name: '广东11选5',
        },
        {
          id: 7,
          name: '急速11选5',
        },
        {
          id: 8,
          name: '幸运快三',
        },
        {
          id: 9,
          name: '安徽快三',
        },
        {
          id: 10,
          name: '甘肃快三',
        },
        {
          id: 11,
          name: '广西快三',
        },
        {
          id: 12,
          name: '贵州快三',
        },
        {
          id: 13,
          name: '湖北快三',
        },
        {
          id: 14,
          name: '北京赛车',
        },
        {
          id: 15,
          name: '幸运飞艇',
        },
        {
          id: 16,
          name: '极速赛车',
        },
        {
          id: 17,
          name: '极速飞艇',
        },
        {
          id: 18,
          name: '北京28',
        },
        {
          id: 19,
          name: '幸运28',
        },
        {
          id: 20,
          name: '香港六合彩',
        },
        {
          id: 21,
          name: '急速六合彩',
        },
        {
          id: 22,
          name: '十分六合彩',
        },
          {
          id: 23,
          name: '福彩3d',
        },
        {
          id: 24,
          name: '排列三',
        },
        {
          id: 25,
          name: '极速福彩3d',
        },
        {
          id: 26,
          name: '腾讯分分彩',
        },
        {
          id: 27,
          name: '日本1.5分彩',
        }
      ],
      buttonNames: [
        {
          id: 1,
          name: '号码',
        },
        {
          id: 2,
          name: '大小',
        },
        {
          id: 3,
          name: '单双',
        },
        {
          id: 4,
          name: '形态/总和',
        }
      ],
      activeBtnIndex: 0,
      // 今日已开奖
      dataList: [
        {
          id: 1,
          dateNo: '18120659',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        },
        {
          id: 2,
          dateNo: '18120658',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        },
        {
          id: 3,
          dateNo: '18120657',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        },
        {
          id: 4,
          dateNo: '18120656',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        },
        {
          id: 5,
          dateNo: '18120655',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        },
        {
          id: 6,
          dateNo: '18120654',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        },
        {
          id: 7,
          dateNo: '18120653',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        },
      ],
      // 底部彩票信息
      generalInfo: {
        nextDateNo: '18041578',
        drawTime: new Date().getTime() + 10 * 3600 * 1000,
        drawedCount: 807,
        remainingCount: 345
      },
      btn:['前天','昨天','今天'],
      clickIndex: -1,

      //表头
      listHead: ['期号','时间','号码','大小','单双','总和','龙湖','形态'],
      listHeadIndex: 2,

      controlIndex: 0,
      listData: [
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '小',
              sum3: '双',
              dragonTiger: '虎',
              form1: '杂六',
              form2: '顺子',
              form3: '半顺',
              isCurrent: true
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '虎',
              form1: '杂六',
              form2: '顺子',
              form3: '半顺',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '小',
              sum3: '双',
              dragonTiger: '虎',
              form1: '杂六',
              form2: '顺子',
              form3: '半顺',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '龙',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '单',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          {
              issueNumber: '180415066',
              time: '2018/04/15 16:30:45',
              sanxiang: [
                      [3,8,0,2,8],
                      ['大'],
                      ['单']
                  ],
              sum1: 17,
              sum2: '大',
              sum3: '双',
              dragonTiger: '和',
              form1: '顺子',
              form2: '顺子',
              form3: '对子',
              isCurrent: false
          },
          
          
      ],
      // pc tabnames
      tabNames: [
        {
          id: 1,
          name: '开奖号码',
        },
        {
          id: 2,
          name: '基本走势',
        },
      ]

    }
  },
  methods: {
    showSlide() {
      this.showSlideUp = true
    },
    updateLotteryName(index) {
      this.lotteryName = this.lotteryCates[index].name
      this.showSlideUp = false
    },
    handleBtnClick(index) {
      this.activeBtnIndex = index 
    },

    // others
    //动态给表头span标签绑定class控制样式
    spanWidth(index){
        switch(index){
            case 0:
                return 'issueNumber';
                break;
            case 1:
                return 'time';
                break;
            case 2:
                if( this.listHeadIndex === 2 ){
                    return 'number changeHeadStyle';
                    break;
                }
                return 'number';
                break;
            case 3:
                if( this.listHeadIndex ===3 ){
                    return 'size changeHeadStyle';
                    break;
                }
                return 'size';
                break;
            case 4:
                if( this.listHeadIndex === 4 ){
                    return 'singleOrDouble changeHeadStyle2';
                    break;
                }
                return 'singleOrDouble';
                break;
            case 5:
                return 'sum';
                break;
            case 6:
                return 'dragonTiger';
                break;
            case 7:
                return 'form';
                break;
            default: 
                return '';
                break;
        }
    },

    //表头点击获取index
    getIndex(index){
        if( index >=2 && index <= 4 ){
            this.listHeadIndex = index;
        }
    },

    //选项卡切换
    showSanxiang(indexs){
        switch ( this.listHeadIndex ){
            case 2:
                if( indexs === 0 ) return true;
                else return false;
                break;
            case 3:
                if( indexs === 1 ) return true;
                else return false;
                break;
            case 4:
                if( indexs === 2 ) return true;
                else return false;
                break;
            default:
                if( indexs === 0 ) return true;
                else return false;
                break;
        }
    },
        
    //sum3颜色class绑定
    sum3Color(sum3){
        switch( sum3 ){
            case '双':
                return 'redColor';
                break;
            default: return '';
            break;
        }
    },

    //龙虎榜颜色class绑定
    dragonTigerColor(dragonTiger){
        switch( dragonTiger ){
            case '龙':
                return 'blue';
                break;
            case '虎':
                return 'redColor';
                break;
            case '和':
                return 'green';
                break;
            default: return '';
            break;
        }
    },
        
    //form颜色class绑定
    formColor(form){
        switch( form ){
            case '顺子':
                return 'blue';
                break;
            case '对子':
                return 'redColor';
                break;
            default: return '';
            break;
                
        }
    },
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    .lottery-info 
      padding-top 128px 
      display flex 
      width 100% 
      height 96px 
      background $color-text-button
      align-items center
      .content 
        width 1200px 
        margin 0 auto
        display flex 
        justify-content space-between
        align-items center
        .left 
          display flex 
          align-items center
          .icon >>> .icon 
            width 60px 
            height 60px 
            font-size 54px
          .icon 
            margin-right 10px
          .detail 
            display flex 
            flex-direction column
            height 58px
            justify-content space-between
            .name 
              font-weight 700
            .draw 
              span   
                color $color-sub-grey
                .highlight-red
                  color $color-theme-red 
            .time 
              display flex 
              .countdown-wrapper 
                height 16px
                line-height 16px 
                border-radius 8px 
                padding 0 5px 
                background $color-theme-red
                color #fff  
                margin-left 10px
              span 
                color $color-sub-grey 
                .highlight-red
                  color $color-theme-red
        .center >>> .tab 
          margin-right 20px 
        .right 
          width 130px
    .main   
      max-width 1200px
      margin 0 auto 
      box-sizing border-box 
      margin-top 10px
      #wrap
        width 1198px;
        // height 744px;
        margin-top 10px;
        border 1px solid #dbd3d3;
        border-bottom none;
        border-radius 3px;

        // 按钮筛选部分
        .btnHeader
          width 1198px;
          height 47px;
          border-bottom 1px solid #dbd3d3;
          background-color #faf8f8;
          border-top-left-radius 3px;
          border-top-right-radius 3px;
          font-size 0;
          overflow auto;

            //左侧三个按钮
          .btn
            float left;
            margin-top 11px;
            margin-left 19px;
            padding 0;
            width 75px;
            height 22px;
            border 1px solid #dbd3d3;
            border-radius 2px;
            font-size 14px;
            color #2b3042;
            text-align center;
            line-height 22px;
            background-color #f9f9f9;
            box-shadow 2px 1px 5px 0 rgba(0,0,0,.2);
            outline none;
            text-shadow 3px 4px 5px #efefef;
            cursor pointer;
          
          //右侧图片占位和三个按钮
          .btn2
            float right;
            height 47px;
            line-height 47px;
            // margin-top 14px;
            margin-right 18px;
            cursor pointer;
            font-size 14px;
            color #262d38;
          .img
            float right;
            margin-top 15px;
            margin-right 13px;
            width 14px;
            height 15px;
            border 1px solid red;
          //点击变红
          .changeRed
            color #e85252;
              
      //表格部分
      ul
        width 1198px;
        list-style none;
        li
            width 1198px;
            height 41px;
            background-color #fff;
            line-height 40px;
        
        //表头样式
        .listHead
            overflow auto;
            span 
                float left;
                height 40px;
                line-height 40px;
                text-align center;
                border-right 1px solid #dbd3d3;
                border-bottom 1px solid #dbd3d3;
                font-size 14px;
            .issueNumber
                width 103px;
            .time
                width 166px;
            .number,.size,.singleOrDouble
                width 159px;
                cursor pointer;
            .number
                // border-bottom none;
                background-color #f4f4f4;
                // border-right none;
            .size
                width 158px;
                background-color #f4f4f4;
                border-right 1px solid transparent;
            .singleOrDouble
                width 158px;
                // border-right 1px solid transparent;
                background-color #f4f4f4;
                border-left 1px solid transparent;
            .sum
                width 140px;
            .dragonTiger
                width 94px;
            .form
                width 212px;
                border-right none;
            .changeHeadStyle
                border-right 1px solid #dbd3d3;
                border-bottom none;
                background-color #fff;
                color #e02828;
                font-weight bold;
            .changeHeadStyle2
                border-right 1px solid #dbd3d3;
                border-left 1px solid #dbd3d3;
                border-bottom none;
                background-color #fff;
                color #e02828;
                font-weight bold;
        
        //表格内容
        .listBody
            overflow auto;
            .item
                float left;
                height 40px;
                line-height 40px;
                text-align center;
                border-right 1px solid #dbd3d3;
                border-bottom 1px solid #dbd3d3;
                font-size 14px;
                // overflow hidden
            .issueNumber
                width 103px;
                // margin-top 5px;
                overflow hidden
                
            .time
                width 166px;
                
            .sanxiang
                width 478px;
                .numberBall
                    display inline-block
                    line-height 24px;
                    // color #fff;
                    width 22px;
                    height 22px;
                    border-radius 50%;
                    // background-color #e02828;
                    color #e44545;
                    border 1px solid #e44545;
                    margin-left 11px;
                .sanxiangCurrent
                    display inline-block
                    line-height 24px;
                    color #fff;
                    width 24px;
                    height 24px;
                    border-radius 50%;
                    background-color #e02828;
                    margin-left 11px;
            .sum1,.sum2,.sum3
                width 46px;
            .sum1
                color #e44545;
            .dragonTiger
                width 94px;
            .form1,.form2,.form3
                width 70px;
            .form3
                border-right none;

            //绑定class控制样式
            .redColor
                color #e44545;
            .green
                color #298600;
            .blue
                color #1888d8;
            .current
                height 35px;
                padding-top 5px;
                line-height 14px;
                span 
                    display block;
                    height 14px;
                    float left;
                    width 103px;
                    color #e44545;
                    // margin-left 17px;


              
  @media screen and (max-width 750px)
    .time-picker-adjust 
      box-shadow none !important
    .tabbar-wrapper 
      position fixed 
      top 48px 
      left 0
      right 0
      
    .main 
      box-sizing border-box 
      padding-top 96px 
      .buttons 
        display flex
        justify-content space-between
        align-items center
        box-sizing border-box 
        padding 0 10px
        height 36px
        .btn 
          width calc((100% - 30px) / 4)
          height 24px 
          display flex 
          align-items center
          justify-content center
          box-sizing border-box
          font-weight 700
          // width 100px
      .list 
        box-sizing border-box
        padding 0 10px 
        background $color-text-button
    .bottom-info
      position fixed
      left 0 
      right 0 
      bottom 0
      height 24px 
      background #fff
      box-sizing border-box 
      padding 0 10px 
      display flex 
      align-items center
      .content 
        display flex 
        flex 1
        justify-content space-between
        .content-item 
          font-size 12px 
          color $color-sub-grey
          .highlight-red 
            color $color-theme-red 
          .highlight-dark 
            color $color-theme-dark
        .countdown-wrapper
          height 16px
          line-height 16px 
          border-radius 8px 
          padding 0 5px 
          background $color-theme-red
          color #fff  

</style>